Виджеты. Column Row Container

➡️Скачать презентацию. Flutter Column Row Container
➡️Скачать шпаргалку Виджет Row Column
➡️Ссылка на репозиторий с кодом этого урока

Все свойства и методы для Row и Column

Размер контейнера

mainAxisSize: MainAxisSize.max - Строка или столбец занимают максимально возможное пространство на главной оси. Значение по умолчанию

mainAxisSize: MainAxisSize.min - Строка или столбец ужмутся до своих children

По умолчанию элементы находятся в самом начале главной оси и, строка или столбец, занимает максимальную ширину. Чтобы ширина ужалась до содержимого указываем MainAxisSize.min

child: Row(
  mainAxisSize: MainAxisSize.min, // ужать ширину строки до содержимого
  children: [
    Box(),
    Box(),
    Box(),
  ],
),

                  

Если указано значение MainAxisSize.max, можно применить свойства mainAxisAlignment и crossAxisAlignment

Выравнивание по главной оси mainAxisAlignment

Указывается так - mainAxisAlignment: MainAxisAlignment.start

.start - элементы в начале главной оси.
.end - элементы в конце главной оси.
.center - элементы по центру главной оси.

.spaceBetween - между элементами равное пространство.
.spaceAround - между элементами равное пространство, а также добавляется половина этого пространства до и после первого и последнего элемента.
.spaceEvenly - между элементами равное пространство, включая пространство до и после первого и последнего элемента.

Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.start, // в начале главной оси
  // mainAxisAlignment: MainAxisAlignment.center, // по центру главной оси
  // mainAxisAlignment: MainAxisAlignment.end,    // в конце главной оси

  children: [
    RollCard(),
    RollCard(),
    RollCard(),
  ],
),
                  

Column(
  mainAxisSize: MainAxisSize.max,
  // mainAxisAlignment: MainAxisAlignment.start, 
  // mainAxisAlignment: MainAxisAlignment.center, 
  mainAxisAlignment: MainAxisAlignment.end, 

  children: [
    RollCard(),
    RollCard(),
    RollCard(),
  ],
),

                  

Расстояние между элементами 

Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  // mainAxisAlignment: MainAxisAlignment.spaceAround,
  // mainAxisAlignment: MainAxisAlignment.spaceEvenly,

  children: [
    RollCard(),
    RollCard(),
    RollCard(),
  ],
),
                  

Выравнивание по поперечной оси crossAxisAlignment

Указывается так - crossAxisAlignment: CrossAxisAlignment.stretch

.stretch - элементы растягиваются на всю ширину поперечной оси.
.start - элементы выравниваются в начале поперечной оси.
.end - элементы выравниваются в конце поперечной оси.
.center - элементы выравниваются по центру поперечной оси.
.baseline - базовые линии элементов выравниваются по одной линии.

Чтобы продемонстрировать работу выравнивания по поперечной оси, сделаем размер среднего виджета немного больше. Для этого добавим в виджет RolCard параметр height

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(centerTitle: true, title: const Text("Container")),
      body: Center(
        child: Container(
          decoration: BoxDecoration(color: Color.fromARGB(139, 33, 149, 246)),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              RollCard(),
              RollCard(height: 250), // 👉 Виджет будет выше
              RollCard(),
            ],
          ),
        ),
      ),
    );
  }
}

/// Виджет Карточка товара
/// Товар Роллы содержит картинку, описание и кнопку купить
class RollCard extends StatelessWidget {
  final double height; // 👉 Виджет принимает знчение высоты
  const RollCard({super.key, this.height = 200});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height, // 👉 Используем высоту через параметр
      padding: const EdgeInsets.all(8), 

      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Colors.black),
        borderRadius: BorderRadius.circular(16),
      ),

      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset("assets/images/roll.png", width: 100),
          SizedBox(height: 10),
          Text("Вкусные Роллы", style: TextStyle(fontSize: 12)),
          ElevatedButton(onPressed: () {}, child: Text("Купить")),
        ],
      ),
    );
  }
}
                  

Выравнивание по поперечной оси

Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center, // по центру у поперечной оси
  // crossAxisAlignment: CrossAxisAlignment.start, // в начале поперечной оси
  // crossAxisAlignment: CrossAxisAlignment.end, // в конце у поперечной оси
  // crossAxisAlignment: CrossAxisAlignment.stretch, // растянуть элементы
  children: [
    RollCard(),
    RollCard(height: 250),
    RollCard(),
  ],
),
                  

При использовании CrossAxisAlignment.stretch элементы расстягиваются в данном случае на всю высоту экрана. Нам бы хотелось, чтобы элементы расстянулись на высоту равную самому высокому элементу. В данной ситуации можно ограничить размер родительского виджета у строки, например обернуть строку в Container() или в SizedBox() и указать точные ограничения высоты.

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(centerTitle: true, title: const Text("Container")),
      body: Center(
        child: Container(
          height: 250, // 👉 Ограничиваем размер
          decoration: BoxDecoration(color: Color.fromARGB(139, 33, 149, 246)),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            // crossAxisAlignment: CrossAxisAlignment.center,
            // crossAxisAlignment: CrossAxisAlignment.start,
            // crossAxisAlignment: CrossAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.stretch, // 👉 растянуть элементы
            children: [
              RollCard(),
              RollCard(height: 250),
              RollCard(),
            ],
          ),
        ),
      ),
    );
  }
}